<template>
	<view class="sign_in">
		<uni-nav-bar fixed status-bar :border="false" left-icon="left" title="签到" @clickLeft="back" />
		<view class="header" :style="'background-image: url(' + header_bg + ')'">
			<text class="explain" @click="jumpPage">规则说明</text>
			<view class="my_points" :style="'background-image: url(' + my_points_bg + ')'">
				<p class="title">我的积分</p>
				<p class="points">{{points}}</p>
				<p class="level">{{level_name}}</p>
			</view>
			<view class="sign_m">
				<view class="title">
					<text class="left">签到</text>
					<view class="right">签到提醒 <switch color="#F9AA5B" :checked="switchValue">
							<view class="shade" @click.stop="switchChange"></view>
						</switch>
					</view>
				</view>
				<view class="sign_list">
					<view class="sign_h" v-for="(item, index) in signInfo.list" :key="index" @click="signInEvt">
						<view class="icon" :class="{ icon_bg: index !== signInfo.day || signInfo.today == 1 }">
							<image
								:class="{ img: index < signInfo.day || signInfo.today == 1 && index < signInfo.day + 1 }"
								:src="`${imgPath}/upload/h5/signIn/3.png`" alt=""></image>
							<p>{{ item.score }}</p>
						</view>
						<p class="day">{{ item.name }}</p>
					</view>
				</view>
			</view>
		</view>
		<myTask></myTask>
		<pointShop v-if="isLoad" :end="end" :isAll="isAll" :item="shopList" :isHome="isHome" />
		<luckyPlaza v-if="isLoad" :end="end" :isAll="isAll" :item="luckyList" :isHome="isHome" />
	</view>
</template>
<script>
	import myTask from './myTask';
	import pointShop from '@/components/pointShop';
	import luckyPlaza from '@/components/luckyPlaza';
	export default {
		components: {
			myTask,
			pointShop,
			luckyPlaza
		},
		data() {
			return {
				imgPath: uni.imgPath,
				header_bg: `${uni.imgPath}/upload/h5/signIn/1.png`,
				my_points_bg: `${uni.imgPath}/upload/h5/signIn/2.png`,
				end: 2,
				signInfo: {},
				isAll: false,
				isHome: false,
				isLoad: false,
				shopList: [],
				luckyList: [],
				points: 0,
				signInfo: {},
				level_name: "",
				switchValue: false
			}
		},

		methods: {
			getUserInfo() {
				uni.$http.get('/user/user/getUserInfo').then(yhxx => {
					let res = yhxx.data.data;
					this.switchValue = res.sgin_remind_status;
					this.points = res.wxuser.score;
					this.level_name = res.wxuser.level_name.name;
					uni.$store.state.userInfor = JSON.stringify(res)
				})
			},
			back() {
				uni.navigateBack()
			},
			jumpPage() {
				uni.navigateTo({
					url: '/pagesMy/signIn/signRule/index'
				})
			},
			scoreTaskList() {
				uni.$http.get('/user/public/scoreTaskList').then(res => {
					console.log("scoreTaskList");
					console.log(res);
				})
			},
			init() {
				this.scoreTaskList();
				uni.$http.post('/user/public/sginList').then(res => {
					this.signInfo = res.data.data;
				});
				if (uni.$store.state.userInfor == "") {
					this.getUserInfo()
				} else {
					var userInfor = JSON.parse(uni.$store.state.userInfor);
					this.points = userInfor.wxuser.score;
					this.switchValue = userInfor.sgin_remind_status;
					this.level_name = userInfor.wxuser.level_name.name;
				}
			},
			signInEvt() {
				if (this.signInfo.today != 1) {
					uni.$http.post('/user/public/userSgin').then(res => {
						this.scoreTaskList();
						this.getUserInfo()
					})
				}
			},

			switchChange() {
				var _this = this;
				this.switchValue = !this.switchValue;
				var templateId = 'xy78-3UFBYL5qoU67m76wLSVSf8-BFHx0A5lyOWu4MA';
				if (this.switchValue) {
					uni.requestSubscribeMessage({
						tmplIds: [templateId], // 需要订阅的模板ID
						success(res) {

							if (res[templateId] === 'accept') {
								uni.$http.get('/user/public/sginRemindOpen').then(res => {
									_this.switchValue = true;
									uni.showToast({
										title: '设置成功',
										icon: 'success',
										mask: true
									});
								});

							} else {
								console.log("用户拒绝了订阅")

								_this.switchValue = false;

							}
							// 用户允许订阅通知
						},
						fail(err) {
							// 用户拒绝授权或其他错误
							console.error(err);
							_this.switchValue = false;
							// 引导用户前往【设置】页面打开【接受订阅消息】权限
							wx.showModal({
								title: '通知订阅失败',
								content: '请前往【设置】页面打开【接受订阅消息】权限，并确保下方订阅消息都已经接受。',
								success(res) {
									if (res.confirm) {
										wx.openSetting({
											success(res) {
												// 用户在【设置】页面打开了订阅消息权限后的回调
												_this.switchValue = true;
												console.log(res);

											},
											fail(err) {
												console.error(err);
											}
										});
									}
								}
							});
						}
					});

				} else {
					uni.$http.get('/user/public/sginRemindClose').then(res => {
						uni.showToast({
							title: '设置成功',
							icon: 'success',
							mask: true
						});
					});
				}



			}
		},
		onLoad() {
			var moduleList = JSON.parse(uni.$store.state.moduleList);
			this.luckyList = moduleList[6];
			this.shopList = moduleList[3];
			this.isLoad = true;
			this.init();
		}
	}
</script>
<style lang="scss" scoped>
	.sign_in {
		.header {
			position: relative;
			background-size: 100% 100%;
			padding-top: 20rpx;
			height: 661rpx;

			.explain {
				font-weight: bold;
				margin-left: 20rpx;
				font-size: 26rpx;
			}

			.my_points {
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				padding: 40rpx;
				background-size: 100% 100%;
				width: 228rpx;
				height: 228rpx;
				text-align: center;

				p {
					line-height: 60rpx;
				}

				.title {
					font-weight: bold;
					margin-top: 30rpx;
					font-size: 30rpx;
				}

				.points {
					font-weight: bold;
					font-size: 44rpx;
					color: #A0522E;
				}

				.level {
					font-size: 26rpx;
					color: #000;
				}

				.remind_btn {
					font-weight: 300;
					background-color: #F9AA5B;
					border-radius: 10rpx;
					width: 180rpx;
					margin-left: 50%;
					transform: translateX(-50%);
				}
			}

			.sign_m {
				height: 270rpx;
				position: absolute;
				bottom: 10rpx;
				width: 98%;
				left: 50%;
				transform: translateX(-50%);

				.title {
					height: 60rpx;
					font-size: 26rpx;
					color: #000;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.left {
						margin-left: 20rpx;
					}

					.right {
						position: relative;

						.shade {
							position: absolute;
							width: 100%;
							height: 60rpx;
							background: #000;
							top: 0;
							right: 0;
							opacity: 0.01;
							z-index: 100;
						}
					}



					switch {
						transform: scale(0.6);
					}
				}

				.sign_list {
					text-align: center;
					display: flex;
					justify-content: space-evenly;
					background-color: #FFFFFF;
					padding: 30rpx 20rpx;
					border-radius: 20rpx;
					padding: 20rpx 15rpx;
					width: 96%;

					.sign_h {
						position: relative;
						display: inline-block;

						.icon {
							background-color: #E3773E;
							padding: 15rpx 20rpx;
							border-radius: 10rpx;
							color: #fff;
							font-size: 22rpx;

						}

						.icon_bg {
							background-color: #EFF2F5;
							color: #333;
						}

						image {
							width: 50rpx;
							height: 50rpx;
						}

						.img {
							filter: grayscale(100%);
						}



						.day {
							color: #868686;
							font-size: 20rpx;
							margin-top: 10rpx;
						}
					}
				}
			}
		}
	}
</style>